<template>
  <div class="container">
    <!-- 先把第一张图片显示出来 -->
    <img class="on" src="../../static/imgs/1.jpg"/>
    <img src="../../static/imgs/1.jpg"/>
    <img src="../../static/imgs/1.jpg"/>
    <img src="../../static/imgs/1.jpg"/>
    <!-- 左右切换 -->
    <div class="left"><</div>
    <div class="right">></div>
    <!-- 焦点 -->
    <ul>
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>
<script>
const aImgs = document.querySelectorAll('.container img');
const aLis = document.querySelectorAll('.container li');
const btnLeft = document.querySelector('.container .left');
const btnRight = document.querySelector('.container .right');
//点击事件
//点击按钮图片切换
let index = 0;        //当前图片下标
let lastIndex = 0;
btnRight.onclick = function () {
  //记录上一张图片的下标
  lastIndex = index;
  //清除上一张图片的样式
  aImgs[lastIndex].className = '';
  aLis[lastIndex].className = '';
  index++;
  index %= aImgs.length;    //实现周期性变化
  //设置当前图片的样式
  aImgs[index].className = 'on';
  aLis[index].className = 'active';
}
//左边按钮类似
btnLeft.onclick = function () {
  //记录上一张图片的下标
  lastIndex = index;
  //清除上一张图片的样式
  aImgs[lastIndex].className = '';
  aLis[lastIndex].className = '';
  index--;
  if (index < 0) {
    index = aImgs.length - 1;
  }
  //设置当前图片的样式
  aImgs[index].className = 'on';
  aLis[index].className = 'active';
}
export default {
  name: "elCar"
}
</script>
<style scoped>
div, ul, li {
  margin: 0;
  padding: 0;
}

/*首先准备一个放图片的容器*/
.container {
  width: 500px;
  height: 280px;
  position: relative;
  top: 100px;
  left: 30%;
  /*border: 1px solid #ccc;*/
}

/*图片样式*/
.container img {
  position: absolute; /*把所有图片放在同一个位置*/
  width: 100%;
  transition-duration: 0.5s; /*设置过渡时间*/
  opacity: 0; /*把所有图片变透明*/
}

/*图片显示开关*/
.container img.on {
  opacity: 1; /*用于显示图片*/
}

/*左右按钮 按钮用图片更好点,这里为了简便就用大于小于号*/
.left, .right {
  position: absolute;
  top: 30%;
  width: 60px;
  height: 100px;
  line-height: 100px;
  background-color: #666;
  opacity: 0.5;
  text-align: center;
  font-size: 60px;
  color: #ccc;
  display: none; /*先隐藏按钮*/
  cursor: pointer; /*设置鼠标悬停时的样式*/
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.container:hover .left, .container:hover .right {
  display: block; /*鼠标悬停才容器范围内时显示按钮*/
}

.left:hover, .right:hover {
  color: #fff;
}

/*焦点*/
.container ul {
  position: absolute;
  bottom: 0;
  max-width: 500px;
  padding: 5px 200px;
}

.container ul li {
  list-style: none;
  float: left;
  background-color: #ccc;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: 10px;
  cursor: pointer;
}

.container ul li.active {
  background-color: #282923; /*焦点激活时的样式*/
}

</style>